<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片上传</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <script src="layui/layui.js"></script>
</head>
<body>
<div class="layui-upload">
    <button type="button" class="layui-btn" id="upload">图片上传</button>
    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
        预览图：
        <div class="layui-upload-list" id="preview"></div>
    </blockquote>
</div>
</body>
<script type="text/javascript">
    layui.use('upload', function () {
        var upload = layui.upload;
        //多图片上传
        //执行实例
        var uploadInst = upload.render({
            elem: '#upload'
            , url: 'http://127.0.0.1:8080/add/'
            , multiple: true
            , before: function (obj) {
                $('#preview').children().remove();
                obj.preview(function (index, file, result) {
                    $('#preview').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img" height="200px" width="200px" >')
                });
            }
            , done: function (res) {
                console.log(res);
                sleep(1000);
                //上传完毕
                if (res.error_code === 216681) {
                    layer.msg("图片已存在");
                }else if (res.error_code === 18) {
                    layer.msg("api调用速度太快");
                }else if (res.error_code === 216202) {
                    layer.msg("上传的图片大小错误");
                } else {
                    layer.msg("上传成功");
                }
            }, error: function () {
                layer.msg("服务器错误");

            }
        });
    });
    function sleep(delay) {
        var start = (new Date()).getTime();
        while ((new Date()).getTime() - start < delay) {
            continue;
        }
    }
</script>
</html>